<!--
 * @Author: liyin 2179253556@qq.com
 * @Date: 2023-02-16 16:06:55
 * @LastEditors: liyin 2179253556@qq.com
 * @LastEditTime: 2023-02-17 08:52:01
 * @FilePath: \test\src\components\Common\RecordList.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="record-list-box">
        <!-- 搜索 -->
        <div class="search-box row">
            <van-search class="flex1" v-model="key_word" left-icon="" right-icon="search" shape="round"
                placeholder="搜索内容" />
            <div class="check-link">
                全部评分
                <van-icon name="arrow" color="#B9B9B9" size="14" />
            </div>
        </div>
        <!-- 列表 -->
        <div class="list-for-box" v-if="props.active == '1'">
            <Card v-for="(item, index) in 4" :key="index">
                <div class="row">
                    <div class="icon-flex-box row">
                        <van-icon class="iconfont" class-prefix='icon' name='icon_sushelou' size="45" color="#649FFF" />
                    </div>
                    <div class="info-flex-box flex1">
                        <div>至礼楼-1F-101寝室</div>
                        <div>女生宿舍</div>
                    </div>
                    <div class="right-flex-box">
                        -2分
                    </div>
                </div>
                <Card bgColor="#f9f9f9" padbottom="5">
                    <van-collapse v-model="activeNames" accordion :border="false">
                        <van-collapse-item title="扣分情况" name="1">
                            <template #value>
                                <div>
                                    {{ activeNames == '1' ? '收起' : '展开' }}
                                </div>
                            </template>
                            <div class="collapse-flex-box font16">
                                <van-row style="margin-bottom:10px;">
                                    <van-col :span="6">
                                        扣分时间
                                    </van-col>
                                    <van-col :span="18" class="color3">
                                        2022.03.15 16:21:38
                                    </van-col>
                                </van-row>
                                <van-row style="margin-bottom:10px;">
                                    <van-col :span="6">
                                        扣分类型
                                    </van-col>
                                    <van-col :span="18" class="color3">
                                        卫生评分
                                    </van-col>
                                </van-row>
                                <van-row style="margin-bottom:10px;">
                                    <van-col :span="6">
                                        楼层名称
                                    </van-col>
                                    <van-col :span="18" class="color3">
                                        至礼楼-1F-101寝室
                                    </van-col>
                                </van-row>
                                <van-row style="margin-bottom:10px;">
                                    <van-col :span="6">
                                        操作人员
                                    </van-col>
                                    <van-col :span="18" class="color3">
                                        宿管(李莉颖)
                                    </van-col>
                                </van-row>
                                <van-row>
                                    <van-col :span="6">
                                        扣分原因
                                    </van-col>
                                    <van-col :span="18" class="color3">
                                        室内地板、冲凉房、厕所（有异味）、洗衣台、门窗玻璃、窗台、走廊不清洁、 未倒垃圾等，每一项扣 1分。
                                    </van-col>
                                </van-row>
                            </div>
                        </van-collapse-item>
                    </van-collapse>
                </Card>
                <van-row justify="end" style="margin-top:15px;">
                    <Button round type="primary" row>撤 回</Button>
                </van-row>
            </Card>
        </div>
        <div v-else class="row" :style="
            'height:' +
            ($util.getClientHeight() - 200) +
            'px;justify-content: center;'
        ">
            <van-empty :image="personImg" image-size="260" description="暂无评分记录哦~" />
        </div>
</div>
</template>
<script lang="ts" setup>

import { ref, reactive, onMounted, nextTick } from 'vue'
import $util from "../../util/util";
import personImg from "../../assets/images/ikon_no_record@2x.png";
interface PropsType {
    active?: string
}
const props = withDefaults(defineProps<PropsType>(), {
    active: '1',
})
interface EmitType {
}
const emit = defineEmits<EmitType>()
const key_word = ref('')
const activeNames = ref('1')
</script>
<style lang="scss" scoped>
.record-list-box {
    .search-box {
        background: #ffffff;
        padding: 0 20px 0 8px;

        .check-link {
            margin-left: 10px;
        }
    }

    .list-for-box {
        padding: 0 15px;

        .info-flex-box {
            margin-left: 15px;

            div:last-of-type {
                font-size: 14px;
                color: #999999;
                margin-top: 5px;
            }
        }

        .right-flex-box {
            color: #FF5B44;
        }
    }
}

:deep(.van-collapse-item .van-cell) {
    background: #f9f9f9;
    padding: 0px;
    font-size: 16px;
}

:deep(.van-collapse-item__title--expanded:after) {
    display: none;
}

:deep(.van-collapse-item__content) {
    background: #f9f9f9;
    padding: 0px;
    margin-top: 15px;
}
</style>
